// 用于首页的顶栏
<template>
  <div class="Home_header">
    <img class="logo" @click="goHome" src="../assets/images/logo.png" />
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="black"
      active-text-color="skyblue"
    >
      <el-menu-item index="1" @click="home">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">活动</template>
        <el-menu-item index="2-1" @click="ticketInquiry">近期活动</el-menu-item>
      </el-submenu>
    </el-menu>
    <div>
      <div class="navigation" style="margin-top:30px;margin-right:20px;">
        <span v-show="!username.name">
          <div>
            <span @click="login" class="account-login" style="color: black;cursor: pointer;">登 录</span>
            |
            <span
              @click="login"
              class="account-register"
              style="color: black;cursor: pointer;"
            >注 册</span>
          </div>
        </span>
        <div v-show="username.name" style="margin-top:30px;">
          <span v-bind="username" style="width:100%;margin-right:10px;">{{ username.name }}</span>
          <el-dropdown :hide-on-click="false" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :size="30" :src="username.avatar"></el-avatar>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="user_info">个人信息</el-dropdown-item>
              <el-dropdown-item divided command="login_over">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: {},
      activeIndex2: "1"
    };
  },
  methods: {
    async fetch() {
      if (this.$cookies.isKey("user_info")) {
        var id = this.$cookies.get("user_info").id;
        //   console.log(localStorage.token)
        const res = await this.$http.get("/user/" + id);
        this.username = res.data.info;
        this.username.avatar =
          "http://121.199.23.187:8080/static/images/avatar/" +
          this.username.avatar;
      }
    },
    login() {
      this.$router.push("/login");
    },
    user_info() {
      this.$router.push("/useref");
    },
    login_over() {
      localStorage.clear();
      this.$router.push("login");
    },
    goHome() {
      window.location.href = "/";
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    ticketInquiry() {
      this.$router.push("/eventlist");
    },
    home() {
      this.$router.push("/");
    },
    toUseref() {
      this.$router.push("/useref");
    },
    handleCommand(command) {
      if (command === "user_info") {
        this.user_info();
      } else if (command === "login_over") {
        this.login_over();
      }
    }
  },
  created() {
    this.fetch();
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-family: "微软雅黑";
}

/* 头部的内容 */
.Home_header {
  width: 1920px;
  min-width: 950px;
  height: 80px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */

  .logo {
    align-items: center;
    cursor: pointer;
    height: 50px;
    width: 200px;
    display: block;
    margin: auto 20px;
  }

  /* 登录、注册 */

  /* 用户名 */

  /* 个人信息 */
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
  margin-left: -70%;
  margin-top: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>